其他
【每日一练】46—登录页面表单输入动画效果的实现
写在前面
登录功能是我们在做网站时,一个非常高频的功能需求。当然,也有很多博客个人小站什么的,不需要这个功能,一个功能是否需要,主要还是看我们产品的实际需求,需要我们就加上,不需要自然就是舍弃,不要觉得,这个功能别人有,我没有,好像不行一样,千万不要这么觉得。
但是,对于我们的日常练习,我们肯定是每个常用功能都会尝试着去写一写,练一练,因此,今天我们就来练习一个登录页面的效果,具体效果可以看下面的GIF动画:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>【每日一练】46—登录页面表单输入动画效果的实现</title>
</head>
<body>
<div class="container">
<h1>请登录</h1>
<form>
<div class="form-control">
<input type="text" required>
<label>邮箱地址</label>
</div>
<div class="form-control">
<input type="password" required>
<label>登录密码</label>
</div>
<button class="btn">登录</button>
<p class="text">没有账户 <a href="#">马上注册</a> </p>
</form>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
body {
background-color: steelblue;
color: #fff;
font-family: 'Muli', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.container {
background-color: rgba(0, 0, 0, 0.4);
padding: 20px 40px;
border-radius: 5px;
}
.container h1 {
text-align: center;
margin-bottom: 30px;
}
.container a {
text-decoration: none;
color: lightblue;
}
.btn {
cursor: pointer;
display: inline-block;
width: 100%;
background: lightblue;
padding: 15px;
font-family: inherit;
font-size: 16px;
border: 0;
border-radius: 5px;
}
.btn:focus {
outline: 0;
}
.btn:active {
transform: scale(0.98);
}
.text {
margin-top: 30px;
}
.form-control {
position: relative;
margin: 20px 0 40px;
width: 300px;
}
.form-control input {
background-color: transparent;
border: 0;
border-bottom: 2px #fff solid;
display: block;
width: 100%;
padding: 15px 0;
font-size: 18px;
color: #fff;
}
.form-control input:focus,
.form-control input:valid {
outline: 0;
border-bottom-color: lightblue;
}
.form-control label {
position: absolute;
top: 15px;
left: 0;
pointer-events: none;
}
.form-control label span {
display: inline-block;
font-size: 18px;
min-width: 5px;
transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.form-control input:focus + label span,
.form-control input:valid + label span {
color: lightblue;
transform: translateY(-30px);
}
const labels = document.querySelectorAll('.form-control label')
labels.forEach(label => {
label.innerHTML = label.innerText
.split('')
.map((letter, idx) => `<span style="transition-delay:${idx * 50}ms">${letter}</span>`)
.join('')
})
写在最后
以上就是每日一练的全部内容,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。
我是杨小爱,我们明天见。
学习更多技能
请点击下方公众号